<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表单元素</title>
    </head>
    <body>
        <form action="#">
            <div>
                用户名: <input type="text" name="username" value="zhangsanfeng">
            </div>
            <div>
                密码: <input type="password" name="password" value="wudang">
            </div>
            <div>
                性别: 
                <input type="radio" name="gender" value="male"> 靓仔
                <input type="radio" name="gender" value="female" checked="checked"> 靓妹
            </div>
            <div>
                头像: <input type="file" name="headImage">
            </div>
            <div>
                爱好: 
                <input type="checkbox" name="hobby" value="eat" checked="checked"> 吃
                <input type="checkbox" name="hobby" value="eat-ji"> 吃鸡
                <input type="checkbox" name="hobby" value="sleep"> 睡
            </div>
            <div>
                籍贯: 
                <select name="hometown">
                    <option value="jiangxi">江西省</option>
                    <option value="jiangdong">江东省</option>
                    <option value="jiangnan" selected='selected'>江南省</option>
                    <option value="jiangbei">江北省</option>
                </select>
            </div>
            <div>
                <textarea name='description'></textarea>
            </div>
            <div>
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </div>
        </form>

        <hr>

        <button type="button" onclick="X.focus()">选中单行文本框</button>

        <button type="button" onclick="X.reset()">重置表单</button>

        <button type="button" onclick="X.select()">选择头像</button>

        <button type="button" onclick="X.state()">查询单选框和复选框的状态</button>

        <button type="button" onclick="X.choose()">选择下拉框中的第一个选项</button>

        <script>
            let X = {
                focus: function(){
                    let input = document.querySelector( 'input[name=username]' );
                    input.focus();
                },
                reset: function(){
                    let input = document.querySelector( 'input[type=reset]' );
                    input.click();
                },
                select: function(){
                    let input = document.querySelector( 'input[name=headImage]' );
                    input.click();
                },
                state: function(){
                    let radioList = document.querySelectorAll( 'input[type=radio]' ); 
                    Array.from( radioList ).forEach( r => {
                        // 如果显示书写了 checked="checked" 则 r.checked 取值为 true
                        // 当用户选择了 r 对应的元素时，r.checked 取值为 true
                        // 不论 是否显示书写 checked="checked" 最终都要以用户选择为准
                        console.log( r , r.checked );
                    });

                    let checkboxList = document.querySelectorAll( 'input[type=checkbox]' ); 
                    Array.from( checkboxList ).forEach( ck => {
                        console.log( ck , ck.checked );
                    });
                },
                choose: function(){
                    let select = document.querySelector( 'select[name=hometown]' );
                    console.log( select.__proto__ );
                    // select 中的 selectedIndex 表示被选中的 选项 的索引
                    console.log( select.selectedIndex , select.selectedOptions );
                    console.log( select.options ); // select.children 

                    setTimeout( function(){
                        select.selectedIndex = 0 ;
                        console.log( select.selectedIndex , select.selectedOptions );
                    } , 5000 );
                }
            }
        </script>

    </body>
</html>